<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap start Template</title>

    <!-- Bootstrap -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

    <link href="table/css/bootstrap.min.css" rel="stylesheet">
    <link href="table/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <style>
        #item ul{list-style:none;}
		#item li{
		float:left;
		margin:10px;
		}

/*Navigation*/
.sidebar-nav {
  width: 240px;
  position: absolute;
  float: left;
  border-top: none;
  border-left: none;
  margin: 0em;
}
.sidebar-nav .nav-header {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #c8c8cb;
  border-left: none;
  color: #333;
  display: block;
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
  font-weight: normal;
  font-size: 1em;
  line-height: 2.5em;
  padding: 0em .25em;
  margin-bottom: 0px;
  text-shadow: none;
  text-transform: none;
  /*Change the arrow direction if the item is collapsed*/

}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .5em;
  margin-right: .25em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header:hover {
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
}
.sidebar-nav .nav-header.collapsed .icon-chevron-up::before {
  content: "\f078";
}
.sidebar-nav .nav-header .icon-chevron-up {
  float: right;
}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .7em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header i[class^="icon-"] {
  margin-right: .75em;
}
.sidebar-nav .nav-list {
  margin: 0px;
  border: 0px;
  background: #f6f6f6;
}
.sidebar-nav .nav-list  > li > a:hover {
  background: #e0e0e8;
}
.sidebar-nav .nav-list  > .active > a,
.sidebar-nav .nav-list  > .active > a:hover {
  background: #d2d2dd;
  color: #555;
  text-shadow: none;
}
.sidebar-nav .nav-list  > .active > a:hover {
  background: #c3c3d2;
}
.sidebar-nav .nav-list  > li > a {
  color: #444;
  padding: .5em 1em;
}
.sidebar-nav .nav-list.collapse.in {
  border-bottom: 1px solid #ccc;
}
.content {
  min-width: 400px;
  position: relative;
  min-height: 560px;
  background: #fff;
  margin-left: 240px;
  border-left: 1px solid #cccccc;
  border-left: 3px solid #999999;
}

    </style>
    <!--数据表格样式CSS-->
    <style>
        .update {
            color: #333;
            margin-right: 5px;
        }

        .remove {
            color: red;
            margin-left: 5px;
        }

        .alert {
            padding: 0 14px;
            margin-bottom: 0;
            display: inline-block;
        }
    </style>
</head>
<body>
<header>
    <div class="row clearfix" style="background-color:Gray">
        <div class="col-md-3">
            <img src="logo.jpg" alt="140x140" class="img-thumbnail" style="height:56px;width:240px;">
            <i class="fa fa-bars fa-2x" aria-hidden="true" style="margin:0 0 0 20px;"></i>
        </div>
        <div class="col-md-6" style="margin:-8px;">
            <h3>中信银行调度监控平台</h3>
        </div>
        <div class="col-md-2 pull-right" id='item'>
            <ul>
                <li title="首页">
                    <a href="#"><i class="fa fa-home fa-lg" aria-hidden="true"></i></a>
                </li>
                <li title="系统设置">
                    <a href="#"><i class="fa fa-cog fa-lg" aria-hidden="true"></i></span></a>
                </li>
                <li title="退出系统">
                    <i class="fa fa-power-off fa-lg" aria-hidden="true"></i>
                </li>
            </ul>
        </div>
    </div>
</header>
<!--menu-->
<div class="sidebar-nav">
    <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>Dashboard</a>
    <ul id="dashboard-menu" class="nav nav-list collapse in">
        <li><a href="#">首页</a></li>
        <li class="active"><a href="#">调度计划信息</a></li>
        <li><a href="#">修改调度计划信息</a></li>
        <li><a href="#">调度作业信息</a></li>
        <li><a href="#">调度作业关系</a></li>
    </ul>
</div>
<div class="content">

    <div class="header">
        <h1 class="page-title">调度计划信息</h1>
    </div>
    <!--<ul class="breadcrumb">
        <li><a href="#">首页</a><span class="divider"></span></li>
        <li class="active">调度计划信息</li>
    </ul>

    <div class="container-fluid">

        &lt;!&ndash;条件查询&#45;&#45;begin&ndash;&gt;
        <div class="row">
            <div class="col-sm-2 labelName" style="font-size:20px;">调度计划编号：</div>
            <div class="col-sm-2"><input type="text" id="QjobId" name="jobId" class="form-control" maxlength="15">
            </div>
            <div class="col-sm-2 labelName" style="font-size:20px;">调度计划名称：</div>
            <div class="col-sm-2"><input type="text" id="QjobName" name="jobName" class="form-control" maxlength="30">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2 labelName" style="font-size:20px;">调度计划类别：</div>
            <div class="col-sm-2">
                <select name="planType" id="QplanType" class="form-control">
                    <option value="" selected="selected">请选择</option>
                    <option value="a">a</option>
                    <option value="b">b</option>
                    <option value="c">c</option>
                </select>
            </div>
            <div class="col-sm-2 labelName" style="font-size:20px;">创建时间：</div>
            <div class="col-sm-6">
                <input type="text" id="fromCreateTime" name="fromCreateTime" class="form-control datePicker"
                       style="display:inline-block;width:auto;">
                &#45;&#45;
                <input type="text" id="toCreateTime" name="toCreateTime" class="form-control datePicker"
                       style="display:inline-block;width:auto;">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9"></div>
            <div class="col-sm-2">
                <button class="btn btn-primary" id="submitSearch" onclick="query()" style="font-size:18px;">搜索</button>
                <button class="btn btn-primary" id="submitReset" type="reset" style="font-size:18px;">重置</button>
            </div>
        </div>-->
        <!--条件查询--end-->

        <!--数据表格--begin-->
        <div class="container">
            <p class="toolbar">
                <a class="create btn btn-default" href="javascript:">创建新项目</a>
                <span class="alert"></span>
            </p>
            <table id="table"
                   data-show-refresh="true"
                   data-show-columns="true"
                   data-search="true"
                   data-query-params="queryParams"
                   data-toolbar=".toolbar">
                <thead>
                <tr>
                    <th data-checkbox="true" data-maintain-selected="true" checkboxEnabled="true"></th>
                    <th data-field="itemName">作业号</th>
                    <th data-field="prizeTime">作业名称</th>
                    <th data-field="prizeLevel">作业优先级</th>
                    <th data-field="teaName">作业执行名称</th>
                    <th data-field="teaWorkPer">作业描述</th>
                    <th data-field="stuName">是否有子作业</th>
                    <th data-field="stuNum">创建时间</th>
                    <th data-field="action"
                        data-align="center"
                        data-formatter="actionFormatter"
                        data-events="actionEvents">操作
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <!--数据表格--end-->
        <div id="modal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">序号</span>
                            <input class="form-control" type="text" name="id" id="id" disabled="disabled">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业号</span>
                            <input class="form-control" type="text" name="itemName" id="itemName">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业名称</span>
                            <input class="form-control" type="text" name="prizeTime" id="prizeTime">
                        </div>
                        <div class="input-group">

                            <span class="input-group-addon">作业优先级</span>
                            <input class="form-control" type="text" name="prizeLevel" id="prizeLevel">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业执行名称</span>
                            <input class="form-control" type="text" name="teaName" id="teaName">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">作业描述</span>
                            <input class="form-control" type="text" name="teaWorkPer" id="teaWorkPer">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">是否有子作业</span>
                            <input class="form-control" type="text" name="isSubJob" id="isSubJob">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">是否等待</span>
                            <input class="form-control" type="text" name="stuName" id="stuName">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">是否删除</span>
                            <input class="form-control" type="text" name="stuNum" id="stuNum">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">创建时间</span>
                            <input class="form-control" type="text" name="stuCol" id="stuCol">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">更新时间</span>
                            <input class="form-control" type="text" name="stuClass" id="stuClass">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">更新用户</span>
                            <input class="form-control" type="text" name="stuPho" id="stuPho">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

    </div>
</div>
<script>
    function query(){
        $.ajax({
			type: "get",                //传递方法
			url:"subject/query",     //数据接口
			dataType:"json",          //数据格式
			success: function(data)     //如果接收成功执行以下
			{
			    <!--Tempo.prepare("myDiv").render(data);-->
				console.log("查询成功");
				console.log(data);
			},
			error:function()//如果接收不成功执行以下
			{
			    console.log("查询错误");
			}
		});
    }
    function edit(){
        layer.open({
            title: '在线调试',
            content: $("template").html()
        });
    }
    function shanchu(){
        layer.confirm(
            '确定要删除此条记录？',
            {btn:['确定','取消'],icon:0},
            function(){
                var a=$("#planType").val();
                alert(a);
                var key = rowData[json['key']];
                $.ajax({
                    url:"/scheduler/jobRelations/"+key,
                    data:rowData,
                    type:"delete",
                    callback:function(data){
                        layer.msg('信息删除成功！');
                        $(elem).parent().parent().remove();
                    }
                })
            },
            function(){
                layer.msg('已取消删除此条记录！');
            }
        )
    }
</script>
<!--bootstrap-->
<script src="jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!--<script src="../public/table/js/jquery.min.js"></script>
<script src="../public/table/js/bootstrap.min.js"></script>-->
<script src="table/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="table/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>


<!--tempo-->
<script src="tempo-2.0/tempo.js"></script>
<script src="tempo-2.0/tempo.min.js"></script>
<script src="layer/layer.js"></script>

<!--数据表格js-->
<script>
var update=0;
var rowId;
    var $table = $('#table').bootstrapTable({
                url: "/scheduler/jobs",
                toolbar: '#toolbar', //工具按钮用哪个容器
                //striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                //queryParams: postQueryParams,//传递参数（*）
                //sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                strictSearch: true,
//              height: table_h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变，且颜色也不会改变？？？？
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                paginationHAlign: "left",
                singleSelect: true,
                search: true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                //strictSearch: true,
                showColumns: true, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                clickToSelect: true, //是否启用点击选中行
                paginationPreText: "<<",
                paginationNextText: ">>"
            }),
            $modal = $('#modal').modal({show: false}),
            $alert = $('.alert').hide();

        // create event创建事件
        $('.create').click(function () {
            showModal($(this).text());
            update=2;
        });

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
            '<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>',
            '<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>',
        ].join('');
    }

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
            showModal($(this).attr('title'), row);
            rowId=row.id;
            update=1;
        },

        'click .remove': function (e, value, row) {
            if (confirm('Are you sure to delete this item?')) {
                $.ajax({
                    url: "/scheduler/jobs/"+ row.id,
                    type: 'delete',
                    success: function () {
                        $table.bootstrapTable('refresh');
                        showAlert('Delete item successful!', 'success');
                    },
                    error: function () {
                        showAlert('Delete item error!', 'danger');
                    }
                })
            }
        }
    };

    $(function () {
        $modal.find('.submit').click(function () {
            var row = {};
            $modal.find('input[name]').each(function () {
                row[$(this).attr('name')] = $(this).val();
            });

            if(update==2){
                url="/scheduler/jobs";
                type="post";
                alert(update);
            }
            else if(update==1){
                url="/scheduler/jobs/"+ rowId;
                type="put";
                alert(update);
            }
                $.ajax({
                    url: url,
                    type: type,
                    contentType: 'application/json',
                    data: JSON.stringify(row),
                    success: function () {
                        $modal.modal('hide');
                        $table.bootstrapTable('refresh');
                        showAlert(('创建') + ' item successful!', 'success');
                    },
                    error: function () {
                        $modal.modal('hide');
                        showAlert(('创建') + ' item error!', 'danger');
                    }
                });
        });
    });

    function showModal(title, row) {
        row = row || {
                    id: '',
                    state: 0
                }; // default row value
        $modal.data('id', row.code);
        $modal.find('.modal-title').text(title);
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        }
        $modal.modal('show');
    }

    //显示结果信息，3秒后关闭
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
                .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
</script>

<!--<template>
    <div class="template">
        <form id="editForm">
            <div class="row">
                <div class="col-sm-3 labelName">调度计划类别：</div>
                <div class="col-sm-9">
                    <input type="hidden" name="id">
                    <input type="text" class="form-control" name="planType">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 labelName">作业号：</div>
                <div class="col-sm-9">
                    <select type="select" class="form-control" name="planType" id ="jobId" required></select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3 labelName">前置作业号：</div>
                <div class="col-sm-9">
                    <input type="text" class="form-control" name="preJobId" maxlength="30" required>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5 labelName">是否删除：</div>
                <div class="col-sm-7">
                    <input type="text" class="form-control" name="isDeleted" maxlength="30" required>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5 labelName">优先级：</div>
                <div class="col-sm-7">
                    <input type="number" class="form-control" name="planLevel" required min="1" max="10" pattern="/^\d{1,2}$/"/>
                </div>
            </div>
        </form>
    </div>
</template>-->
<template>
    <div class="template">
        <form id="editForm">
            <div class="row">
                <div class="col-sm-3 labelName">调度计划类别：</div>
                <div class="col-sm-9">
                    <input type="hidden" name="id">
                    <input type="text" class="form-control" name="planType">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 labelName">作业号：</div>
                <div class="col-sm-9">
                    <select type="select" class="form-control" name="jobId" id ="planType1" required></select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3 labelName">前置作业号：</div>
                <div class="col-sm-9">
                    <input type="text" class="form-control" name="preJobId" maxlength="30" required>
                </div>
            </div>
        </form>
    </div>
</template>
</body>
</html>
